<template>
  <div class="bg-white home-bg margin-left-right-20 margin-top-10">
    <div>
      <div class="padding-top-20 margin-right-20 f-left">
        <div class="margin-bottom-20 vertical-btn" @click="tabClick('operate')" :class="activeName == 'operate' ? 'active-vertical-btn' : ''">{{ isIncome ? '运营收入' : '运营支出' }}</div>
        <div class="vertical-btn" @click="tabClick('noOperate')" :class="activeName == 'noOperate' ? 'active-vertical-btn' : ''">{{ isIncome ? '非运营收入' : '非运营支出' }}</div>
      </div>
      <div class="right-box f-right">
        <div class="padding-right-20 padding-top-10 relative-box">
          <el-tabs v-model="classifyKey" @tab-click="classifyClick">
            <el-tab-pane label="分类汇总" name="collect" key="collect"> </el-tab-pane>
            <el-tab-pane label="月度明细" name="month" key="month"> </el-tab-pane>
          </el-tabs>
          <div class="btn-box color-999999 font-size-16">单位：万元<span class="space-box"></span>现金流口径</div>
        </div>
        <div :key="classifyKey" class="padding-right-20 padding-bottom-10" :style="[{ height: tableHeight + 'px' }]">
          <el-table v-if="dataList.length > 0" ref="table" :row-class-name="tableRowClassName" class="new-table-style" :data="dataList" style="width: 100%" :height="tableHeight" row-key="primaryKey" border :default-expand-all="false" :tree-props="defaultProps" lazy :load="loadData" @expand-change="expandChange">
            <el-table-column fixed label="" width="160">
              <el-table-column :label="firstLine.classificationName" width="160" prop="classificationName">
                <template slot-scope="scope">
                  <span v-if="scope.row.classificationName" :style="{ paddingLeft: scope.row.hasChildren ? '0' : '23px' }" v-tooltip.content="scope.row.classificationName" v-html="scope.row.chargeCode ? scope.row.chargeCode + `<br/><span style='margin-left: ${(scope.row.level - 1) * 16 + 20}px'></span>` + scope.row.classificationName : scope.row.classificationName"></span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column fixed label="" width="120">
              <el-table-column :label="firstLine.description" width="120">
                <template slot-scope="scope">
                  <span v-if="['集团合计', '项目合计', '事项合计'].indexOf(scope.row.description) > -1">{{ scope.row.description }}</span>
                  <template v-else>
                    <span v-if="(pageType == 'projectYear' || pageType == 'projectMonth') && scope.row.isLastLevel && scope.row.relationAssetType" v-tooltip.content="scope.row.assetRentStatusDesc" @click="showCard(scope.row)" class="color-333333 cursor-pointer-line">{{ scope.row.description }}</span>
                    <span class="color-333333" :class="(pageType == 'groupYear' && scope.row.isProject) || pageType == 'groupMonth' ? 'cursor-pointer-line' : ''" v-else v-tooltip.content="scope.row.description" @click="goInfo(scope.row)">{{ scope.row.description }}</span>
                  </template>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column v-for="(filed, filedIndex) in filedList" :key="`filed${filedIndex}`" :fixed="filed.fixed" :label="filed.label" :min-width="filed.label.indexOf('执行差异') > -1 ? 160 : 110">
              <el-table-column :min-width="filed.label.indexOf('执行差异') > -1 ? 160 : 110" :class-name="setClassName(filed)">
                <template #header>
                  <income-pay-tooltip :model="firstLine" :filed="filed" :classifyKey="classifyKey" :empty-txt="emptyTxt" :pageType="pageType" :isIncome="isIncome" :operateType="activeName" @diffAnalyseFn="diffAnalyseFn" @sortByDifference="sortByDifference" :is-header="true"></income-pay-tooltip>
                </template>
                <template slot-scope="scope">
                  <income-pay-tooltip :model="scope.row" :filed="filed" :classifyKey="classifyKey" :empty-txt="emptyTxt" :pageType="pageType" :isIncome="isIncome" :operateType="activeName" @diffAnalyseFn="diffAnalyseFn" @sortByDifference="sortByDifference"></income-pay-tooltip>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <el-empty class="margin-top-100" v-else description="暂无数据"></el-empty>
        </div>
      </div>
    </div>

    <!-- 集团月报 ｜ 项目月报 差异分析弹框 -->
    <dialog-diff-analyse ref="analyse" :sourceData="analyseObj" :operateType="activeName" :is-income="isIncome" :pageType="pageType"></dialog-diff-analyse>
    <!-- 资产卡片 -->
    <room-dialog ref="roomDialog" :model="aeestModel" enterType="plan"></room-dialog>
    <!-- 停车场 广告 卡片 -->
    <park-ad-dialog ref="parkAdDialog" :model="parkAdModel" enterType="plan" :pageType="parkAdType"></park-ad-dialog>
  </div>
</template>
<script>
  import { apiGroupIncomeExpendSummary, apiProjectIncomeExpendSummary, apiDetailRoom, apiDetailPark, apiDetailAd } from '@a/about';
  import { accMul } from '@/common/js/utils';
  import incomePayTooltip from './incomePayTooltip.vue';
  import dialogDiffAnalyse from '@c/plan/dialog/dialogDiffAnalyse.vue';
  import RoomDialog from '@/common/components/assetDialog/roomDialog.vue';
  import parkAdDialog from '@c/roomStatus/parkAdDialog';
  import $ from 'jquery';

  export default {
    props: {
      // groupYear: 集团年度, groupMonth: 集团月度,  projectYear: 项目年度, projectMonth: 项目月度
      pageType: {
        type: String,
        default: '',
      },
      // 支出还是收入
      isIncome: {
        type: Boolean,
        default: false,
      },
    },

    data() {
      return {
        activeName: 'operate',
        classifyKey: 'collect',
        defaultProps: {
          children: 'childList',
          hasChildren: 'hasChildren',
        },
        loadDataMap: {},
        aeestModel: {}, //资产卡片的信息
        parkAdModel: {}, //停车场 广告 卡片的信息
        parkAdType: '',
        tableHeight: 0,
        diff: false, //差异是否显示红色
        dataList: [],
        firstLine: {},
        filedList: [],
        yearFiledList: [
          { label: '本年计划', filedName: 'currentBudgetAmount' },
          { label: '去年执行', filedName: 'lastExecutionAmount' },
          { label: '本年计划与去年执行差异', filedName: 'difference' },
          { label: '去年计划', filedName: 'lastPlanAmount' },
          { label: '本年计划与去年计划差异', filedName: 'currentLastPlanDifferent' },
          { label: '去年执行与去年计划差异', filedName: 'lastPlanExecutionDifferent' },
        ],
        monthFiledList: [
          { label: '年度预算', filedName: 'yearlyBudgetAmount' },
          { label: '年预计执行', filedName: 'yearlyExecutionAmount' },
          { label: '预计执行差异', filedName: 'expectExecutionDifference' },
          { label: '当期执行目标', filedName: 'currentExecutionAmount' },
          { label: '实际执行', filedName: 'actualExecutionAmount' },
          { label: '执行差异', filedName: 'actualExecutionDifference' },
        ],
        monthList: [
          { label: '1月', filedName: 'monthAmount1', isMonth: true, index: 0 },
          { label: '2月', filedName: 'monthAmount2', isMonth: true, index: 1 },
          { label: '3月', filedName: 'monthAmount3', isMonth: true, index: 2 },
          { label: '4月', filedName: 'monthAmount4', isMonth: true, index: 3 },
          { label: '5月', filedName: 'monthAmount5', isMonth: true, index: 4 },
          { label: '6月', filedName: 'monthAmount6', isMonth: true, index: 5 },
          { label: '7月', filedName: 'monthAmount7', isMonth: true, index: 6 },
          { label: '8月', filedName: 'monthAmount8', isMonth: true, index: 7 },
          { label: '9月', filedName: 'monthAmount9', isMonth: true, index: 8 },
          { label: '10月', filedName: 'monthAmount10', isMonth: true, index: 9 },
          { label: '11月', filedName: 'monthAmount11', isMonth: true, index: 10 },
          { label: '12月', filedName: 'monthAmount12', isMonth: true, index: 11 },
        ],
        dataChildMap: {},
        monthDifferenceList: [],
        analyseObj: {},
        contractList: [],
        pageSize: 10,
        currentPage: 1,
        total: 0,
        mouseCellObj: {}, //鼠标滑过的行的数据
        tooltipShow: true,
        emptyTxt: '本年无计划',
      };
    },

    computed: {
      tooltipContract() {
        if (this.pageType == 'projectMonth' && this.classifyKey == 'collect' && !this.isIncome) {
          return false;
        } else {
          return true;
        }
      },
    },

    methods: {
      //数据源
      async getData() {
        let res = {};
        let params = {
          fundsType: this.isIncome ? 1 : 2, //收入1 支出2
          amountType: this.activeName == 'operate' ? 1 : 2, //经营性1 非经营性2
          projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          year: this.$route.query.year,
          month: this.$route.query.month,
        };
        if (this.pageType == 'groupYear' || this.pageType == 'groupMonth') {
          params.queryType = this.pageType == 'groupYear' ? 3 : 4; //3-集团计划 4-集团月报
          res = await apiGroupIncomeExpendSummary(params);
        } else {
          params.queryType = this.pageType == 'projectYear' ? 1 : 2; //1-项目编制 2-项目执行

          // 项目计划/执行 审批状态参数
          if (this.$route.query.processWorkId) {
            params.ifSearchDraft = 1;
            params.source = this.pageType == 'projectYear' ? 'year' : 'month';
          }

          res = await apiProjectIncomeExpendSummary(params);
        }
        if (res.rows && res.rows.length > 0) {
          if (this.pageType == 'groupYear' || this.pageType == 'groupMonth') this.setProjectLevel(res.rows);
          this.setDiffData(res.rows);
          this.firstLine = res.rows[0];
          this.setDataChildMap(res.rows || [], 1);
          res.rows.splice(0, 1);
        }

        this.dataList = res.rows || [];
        this.monthDifferenceList = res.monthDifferenceList || [];
      },
      setDataChildMap(data, level) {
        data.forEach(item => {
          item.level = level;
          if (item.childList && item.childList.length) {
            // 隐藏最后一层只有一个事项的事项
            item.hasChildren = item.relationAssetStatus == 1 || !(item.childList.length == 1 && item.classificationName == item.childList[0].classificationName && !!item.childList.filter(a => !a.childList && !a.isProject).length);

            if (item.hasChildren) {
              let childList = item.childList.map(row => {
                row.level = level + 1;
                row.hasChildren = row.childList && row.childList.length && (row.relationAssetStatus == 1 || !(row.childList.length == 1 && row.classificationName == row.childList[0].classificationName && !!row.childList.filter(a => !a.childList).length));

                row.relationAssetStatus = row.childList && row.childList.length && !row.hasChildren ? 1 : row.relationAssetStatus;
                let newObj = JSON.parse(JSON.stringify(row));
                newObj.childList = null;
                return newObj;
              });

              this.dataChildMap[item.primaryKey] = childList;
              this.setDataChildMap(JSON.parse(JSON.stringify(item.childList)), level + 1);
            } else {
              // 通过是否资产控制浮层展示
              item.relationAssetStatus = 1;
            }

            item.childList = null;
          } else {
            item.hasChildren = false;
          }
        });
      },
      loadData(tree, treeNode, resolve) {
        this.loadDataMap[tree.primaryKey] = { resolve };
        resolve(this.dataChildMap[tree.primaryKey]);
      },

      //折叠父级 子级同时收起
      expandChange(row, expanded) {
        if (!expanded) {
          this.removeExpandLoad(row.primaryKey);
          // 收起下一层
          let childList = this.dataChildMap[row.primaryKey] || [];
          childList.forEach(item => {
            this.removeExpandLoad(item.primaryKey);
          });
        }
      },
      removeExpandLoad(id) {
        this.$nextTick(() => {
          if (this.loadDataMap[id]) {
            this.$set(this.$refs.table.store.states.treeData[id], 'loading', false);
            this.$set(this.$refs.table.store.states.treeData[id], 'loaded', false);
            this.$set(this.$refs.table.store.states.treeData[id], 'expanded', false);
          }
        });
      },

      //项目月报 分类汇总 排序（按照预计执行差异）排序当前子集childList
      sortByDifference(model, type, sortState) {
        let targetList = this.lodash.cloneDeep(this.dataChildMap[model.primaryKey]);
        if (!targetList || targetList.length == 0) return;
        let lastList = []; //无本年计划的数据
        let resultList = []; //排序后的数据
        // sortState没值代表恢复默认排序
        if (!sortState) {
          resultList = this.lodash.cloneDeep(this.dataChildMap[model.primaryKey]);
        } else {
          for (var i = 0; i < targetList.length; i++) {
            let item = targetList[i];
            if (!item.yearlyBudgetAmount.amount && !item.yearlyExecutionAmount.amount) {
              lastList.push(item);
              targetList.splice(i, 1);
              i = i - 1;
            }
          }
          resultList = this.lodash.sortBy(targetList, function (item) {
            return type == 'asc' ? item.expectExecutionDifferenceAmount.amount : -item.expectExecutionDifferenceAmount.amount;
          });
          resultList.push(...lastList);
        }
        this.loadDataMap[model.primaryKey] && this.loadDataMap[model.primaryKey].resolve(resultList);
      },

      //设置项目级别 集团纬度的 只有两层 第一层：集团 的二层：项目
      setProjectLevel(list) {
        list.forEach(item => {
          if (item.childList && item.childList.length > 0) {
            item.childList.forEach(child => {
              child.isProject = true;
            });
          }
        });
      },

      //差异值的设置
      setDiffData(list) {
        list.forEach(item => {
          if (item.yearlyBudgetAmount.amount == 0 && item.yearlyExecutionAmount.amount == 0) {
            item.expectExecutionDifference.amount = this.emptyTxt;
          } else if (Number(item.yearlyBudgetAmount.amount) == 0 && item.yearlyExecutionAmount.amount != 0) {
            item.expectExecutionDifference.amount = '计划外';
          }

          if (item.currentExecutionAmount.amount == 0 && item.actualExecutionAmount.amount == 0) {
            item.actualExecutionDifference.amount = this.emptyTxt;
          } else if (Number(item.currentExecutionAmount.amount) == 0 && item.actualExecutionAmount.amount != 0) {
            item.actualExecutionDifference.amount = '计划外';
          }

          if (item.currentBudgetAmount.amount == 0 && item.lastExecutionAmount.amount == 0) {
            item.difference.amount = this.emptyTxt;
          } else if (Number(item.currentBudgetAmount.amount) != 0 && item.lastExecutionAmount.amount == 0) {
            item.difference.amount = '本年新增';
          }

          if (item.currentBudgetAmount.amount == 0 && item.lastPlanAmount.amount == 0) {
            item.currentLastPlanDifferent.amount = this.emptyTxt;
          } else if (Number(item.currentBudgetAmount.amount) != 0 && item.lastPlanAmount.amount == 0) {
            item.currentLastPlanDifferent.amount = '本年新增';
          }

          if (item.lastExecutionAmount.amount == 0 && item.lastPlanAmount.amount == 0) {
            item.lastPlanExecutionDifferent.amount = this.emptyTxt;
          } else if (Number(item.lastExecutionAmount.amount) != 0 && item.lastPlanAmount.amount == 0) {
            item.lastPlanExecutionDifferent.amount = '本年新增';
          }

          if (item.childList && item.childList.length > 0) {
            this.setDiffData(item.childList);
          }
        });
      },

      tabClick(tab) {
        this.activeName = tab;
        this.getData();
      },

      classifyClick(tab) {
        if (tab.name == 'collect') {
          this.emptyTxt = '本年无计划';
          this.filedList = this.pageType == 'groupYear' || this.pageType == 'projectYear' ? this.yearFiledList : this.monthFiledList;
        } else {
          this.emptyTxt = '本月无计划';
          this.filedList = this.monthList;
          this.initTableFixedheight();
        }
      },

      //因为加粗了滚动条，所以减少固定列的高度，以免遮挡滚动条
      initTableFixedheight() {
        setTimeout(() => {
          let diffHeight = $('.el-table__fixed').height() - 5;
          $('.el-table__fixed').css('height', diffHeight);
        }, 50);
      },

      //单元格样式
      tableClassName({ row, column, rowIndex, columnIndex }) {
        //groupYear: 集团年度 groupMonth: 集团月度  projectYear: 项目年度 projectMonth: 项目月度
        if (this.pageType == 'groupYear' || this.pageType == 'groupMonth') {
          if ((columnIndex == 0 || columnIndex == 4) && this.diff) {
            if (row.difference && row.difference.amount != 0) {
              return 'active-grid';
            }
          }
        }
        if (this.pageType == 'projectYear' || this.pageType == 'projectMonth') {
          if (columnIndex == 0 && this.diff) {
            if (row.expectExecutionDifference.amount != 0 || row.actualExecutionDifference.amount != 0) {
              return 'active-grid';
            }
          }
          if (columnIndex == 4 && this.diff) {
            if (row.expectExecutionDifference.amount != 0) {
              return 'active-grid';
            }
          }
          if (columnIndex == 7 && this.diff) {
            if (row.actualExecutionDifference.amount != 0) {
              return 'active-grid';
            }
          }
        }
      },

      //大于当前月的是预测值，加深背景色
      setClassName(row) {
        let month = this.$route.query.month;
        if (!month) return;

        if (row.isMonth) {
          let forecastMonth = row.label.slice(0, row.label.length - 1);

          if (Number(forecastMonth) > Number(month)) {
            return 'bg-gray';
          }
        }
      },

      //初始化table 展示哪些字段
      initFieldList() {
        this.filedList = this.pageType == 'groupYear' || this.pageType == 'projectYear' ? this.yearFiledList : this.monthFiledList;
      },

      //切换数据表格树形展开
      diffFn() {
        this.diff = !this.diff;
        this.toggleRowExpansionAll(this.dataList, this.diff);
      },
      toggleRowExpansionAll(data, isExpansion) {
        data.forEach(item => {
          this.$refs.table.toggleRowExpansion(item, isExpansion);
          if (item.childList !== undefined && item.childList !== null) {
            this.toggleRowExpansionAll(item.childList, isExpansion);
          }
        });
      },

      //差异分析
      diffAnalyseFn(filed, model) {
        if (this.pageType == 'groupMonth') {
          let analyseObj = this.monthDifferenceList[filed.index];
          this.analyseObj = analyseObj;
        } else if (this.pageType == 'projectMonth') {
          this.analyseObj = model[filed.filedName];
        }
        this.analyseObj.dialogTitle = filed.label;
        this.$refs.analyse.showDialog = true;
      },

      // 资产 停车场 广告弹窗
      showCard(row) {
        console.log(row);
        if ((this.pageType == 'projectYear' || this.pageType == 'projectMonth') && row.isLastLevel) {
          if (row.relationAssetType == '101') {
            this.parkAdType = 'parking';
            this.showParkCard(row);
          } else if (row.relationAssetType == '102') {
            this.parkAdType = 'ad';
            this.showAdCard(row);
          } else {
            this.showAssetCard(row);
          }
        }
      },

      //资产卡片
      async showAssetCard(row) {
        let res = await apiDetailRoom({ code: row.classificationKey, year: this.$route.query.year, month: this.$route.query.month });
        res.code = row.classificationKey;
        this.aeestModel = res;
        await this.$nextTick();
        this.$refs.roomDialog.getAssetInfo();
        this.$refs.roomDialog.dialogShow = true;
        this.$refs.roomDialog.activeTab = 'asset';
      },

      //停车场
      async showParkCard(row) {
        let res = await apiDetailPark({ code: row.classificationKey, year: this.$route.query.year, month: this.$route.query.month });
        this.parkAdModel = res;
        this.$refs.parkAdDialog.dialogShow = true;
        this.$refs.parkAdDialog.activeTab = 'asset';
      },

      //广告位
      async showAdCard(row) {
        let res = await apiDetailAd({ code: row.classificationKey, year: this.$route.query.year, month: this.$route.query.month });
        this.parkAdModel = res;
        this.$refs.parkAdDialog.dialogShow = true;
        this.$refs.parkAdDialog.activeTab = 'asset';
      },

      /************
        集团计划：集团行不跳  项目行跳项目
        项目计划：全都不跳
        集团月报：只点击年度预算列跳转对应的收入支出页 （集团跳集团 项目跳项目），项目行跳对应项目的收入支出页
        项目月报：只点击年度预算列跳转对应项目的收入支出页
      **********/
      goInfo(row) {
        let pathName = '';
        let queryData = {
          year: this.$route.query.year || '',
          manage: this.activeName,
          classifyKey: this.classifyKey,
        };

        //集团计划
        if (this.pageType == 'groupYear' && row.isProject) {
          pathName = this.isIncome ? 'compile-income-plan' : 'compile-pay-plan';
          queryData.headerName = '项目计划';
          queryData.planProjectName = row.description;
          queryData.projectKey = row.classificationKey;
          this.doSkip(pathName, queryData);
        }

        //集团月报
        if (this.pageType == 'groupMonth') {
          pathName = this.isIncome ? 'execute-income-plan' : 'execute-pay-plan';
          queryData.headerName = '项目月报';
          queryData.projectKey = row.classificationKey;
          queryData.planProjectName = row.description;
          queryData.month = this.$route.query.month;
          this.doSkip(pathName, queryData);
        }
      },

      doSkip(pathName, queryData) {
        let pathUrl = {
          name: pathName,
          query: queryData,
        };

        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },

      //table行颜色
      tableRowClassName({ row, rowIndex }) {
        console.log(row)
        console.log(rowIndex)
        if (row.level == 1) {
          return 'bg-first-row';
        } else if (row.assetRentStatus == 'notOperation') {
          return 'bg-grey';
        }
      },
    },

    created() {
      this.activeName = this.$route.query.manage || 'operate';
      this.classifyKey = this.$route.query.classifyKey || 'collect';
      this.emptyTxt = this.$route.query.classifyKey == 'month' ? '本月无计划' : '本年无计划';
      this.tableHeight = document.body.offsetHeight - 140;
      //今年预算字段项目和集团取值不同
      this.yearFiledList[0].filedName = this.pageType == 'projectYear' ? 'yearlyBudgetAmount' : 'currentBudgetAmount';
      this.initFieldList();
      if (this.classifyKey == 'month') {
        this.classifyClick(this.classifyClick);
      }
    },

    mounted() {
      this.getData();
    },

    components: { incomePayTooltip, dialogDiffAnalyse, RoomDialog, parkAdDialog },
  };
</script>

<style lang="scss" scoped>
  .btn-box {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .inline-block {
    display: inline-block;
  }

  .mask-item {
    line-height: 30px;
  }

  .block-box {
    display: block;
  }
  .bg-black-box {
    ::v-deep .btn-prev,
    ::v-deep .btn-next {
      background: #303133 !important;
      min-width: 15px;
    }
  }
  ::v-deep .el-link.el-link--default {
    color: #ffffff;
  }
  ::v-deep .el-link.el-link--default:hover {
    color: #409eff;
  }

  .new-table-style ::v-deep thead.is-group tr:nth-child(2) {
    th.el-table__cell {
      background: rgba(51, 132, 254, 0.2) !important;

      .cell {
        div,
        span {
          font-size: 16px;
          color: #333;
        }

        .color-red {
          color: red !important;
        }

        .color-green {
          color: #12aa9c !important;
        }

        font-size: 16px;
        color: #333;
      }
    }
  }

  ::v-deep .el-table {
    .el-table__header-wrapper .has-gutter tr .el-table__cell:nth-last-child(2) {
      border-right: none !important;
    }

    .el-table__placeholder {
      width: 0;
    }

    .el-table__cell:first-child .cell {
      white-space: nowrap;
      cursor: pointer;
    }

    .el-table__cell:nth-child(2) .cell {
      white-space: nowrap;
      // cursor: pointer;
    }

    .bg-grey {
      background: #f1f1f1;
    }

    .bg-first-row {
      background: #FEF4E5;
    }
  }

  ::v-deep .bg-gray {
    background: rgba($color: #dbfeff, $alpha: 1) !important;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #535353 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    background: #ededed !important;
  }
  // ::v-deep .el-table thead .cell {
  //   font-size: 14px;
  // }
  .vertical-btn {
    width: 40px;
    background: #f2f2f2;
    color: #666666;
    text-align: center;
    line-height: 20px;
    padding: 20px 10px;
    word-wrap: break-word;
    white-space: normal;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
  }
  .active-vertical-btn {
    background: #3384fe;
    color: #ffffff;
  }

  .right-box {
    width: calc(100% - 62px);
  }

  .space-box {
    display: inline-block;
    width: 30px;
  }
</style>
